<template>
  <div class="bigbg">
    <div class="toubu">
      <div class="tl">
        <span class="xuank" @click="headertab = 0">自选</span>
      </div>
      <a class="tr" @click="getsearch"></a>
    </div>
    <div class="daboxk">
      <div class="bankuai">
        <div
          class="erty "
          v-for="(i, index) in listArr1"
          :key="i.id"
          v-if="index < 3"
          :class="i.floatRate > 0 ? 'redbg' : 'greenbg'"
        >
          <h3 :class="i.floatRate > 0 ? 'red' : 'green'">
            {{ i.currentPoint || "--" }}
          </h3>
          <h5>
            {{ i.indexName
            }}<a :class="i.floatRate > 0 ? 'red' : 'green'"
              >{{ i.floatRate || "--" }}%</a
            >
          </h5>
        </div>
      </div>
    </div>
    <div class="xuanzhe">
      <div class="sangh">
        <span class="lety">股票</span>
        <span>最新</span>
        <span>涨跌额</span>
        <span>删除</span>
      </div>
      <van-list
        v-model="loadings"
        :finished="finisheds"
        :finished-text="$t('hj43')"
        @load="onLoads"
        :immediate-check="false"
      >
        <div
          class="shujkl"
          @click="goDetail(item, index)"
          v-for="(item, index) in listArrs"
          :key="item.indexCode"
        >
          <div class="dange">
            <h6>{{ item.stockName }}</h6>
            <p>
              <span v-show="item.stockGid.indexOf('sz') >= 0">深</span>
              <span class="sh" v-show="item.stockGid.indexOf('sh') >= 0"
                >沪</span
              >
              <span class="bj" v-show="item.stockGid.indexOf('bj') >= 0"
                >北</span
              >
              <a class="shbg">{{ item.stockGid }}</a>
            </p>
          </div>
          <div class="dange">
            <span
              class="plk "
              :class="item.creaseRate > 0 ? 'hqred' : 'green'"
              >{{ item.nowPrice }}</span
            >
          </div>
          <div class="dange">
            <a
              class="alk "
              :class="item.creaseRate > 0 ? 'hqredbtnbg' : 'hqgreenbtnbg'"
              >{{ item.creaseRate }}%</a
            >
          </div>
          <div class="dange"><i @click.stop="optionszx(item)"></i></div>
        </div>
      </van-list>
      <!-- <div class="shujkl" v-for="i in 10">
                <div class="dange">
                    <h6>劲仔食品</h6>
                    <p><span style="">深</span><span class="sh" style="display: none;">沪</span><span class="bj"
                            style="display: none;">北</span><a class="">SZ003000</a></p>
                </div>
                <div class="dange"><span class="plk hqgreen">11.72</span></div>
                <div class="dange"><a class="alk hqgreenbtnbg">0.26%</a></div>
                <div class="dange"><i></i></div>
            </div> -->
    </div>

    <div class="tia" @click="$router.push('/trading-list')">
      <img
        src=""
      /><span>添加自选</span>
    </div>
    <div style="height:1.5rem"></div>
  </div>
</template>
<script>
import * as api from "@/axios/api";
import { Toast } from "mint-ui";
export default {
  components: {},
  props: {},
  data() {
    return {
      loadings: false,
      finisheds: false,
      listArrs: [],
      pageNums: 1,
      gpcodes: "",
      listArr1: [
        {
          id: 1,
          indexName: "上证指数",
          indexCode: "i000001",
          indexGid: "sh000001",
          homeShow: 1,
          listShow: 1,
          transState: 1,
          depositAmt: 10000,
          transFee: 400,
          eachPoint: 300,
          minNum: 1,
          maxNum: 100,
          addTime: 1558585556000,
          currentPoint: "--",
          floatPoint: "-0.1780",
          floatRate: "--",
          isOption: "0",
          type: null,
          tdesc: null
        },
        {
          id: 2,
          indexName: "深证成指",
          indexCode: "i399001",
          indexGid: "sz399001",
          homeShow: 1,
          listShow: 1,
          transState: 1,
          depositAmt: 10000,
          transFee: 400,
          eachPoint: 300,
          minNum: 1,
          maxNum: 100,
          addTime: 1558585699000,
          currentPoint: "--",
          floatPoint: "-68.328",
          floatRate: "--",
          isOption: "0",
          type: null,
          tdesc: null
        },
        {
          id: 3,
          indexName: "创业板指",
          indexCode: "i399006",
          indexGid: "sz399006",
          homeShow: 1,
          listShow: 1,
          transState: 1,
          depositAmt: 10000,
          transFee: 400,
          eachPoint: 300,
          minNum: 1,
          maxNum: 100,
          addTime: 1558585700000,
          currentPoint: "--",
          floatPoint: "-12.252",
          floatRate: "--",
          isOption: "0",
          type: null,
          tdesc: null
        }
      ]
    };
  },
  created() {},
  mounted() {
    this.getMyList();
    this.getListMarket();
    this.$nextTick(() => {
      setTimeout(() => {
        this.bindSocket();
        console.log("+++++++执行了1");
      }, 500);
    });
    this.startRefresh();
  },
  beforeDestroy() {
    this.stopRefresh();
  },
  destroyed() {
    this.unBindSocket();
  },
  methods: {
    unBindSocket() {
      this.$socket.connected(socket => {
        socket.send({
          type: "unsub",
          params: "i000001,i399001,i399006"
        });
      });
    },
    // 链接socket
    bindSocket() {
      // var stockCode = '';
      // for(var i=0;i<this.listArrs.length; i++){
      //   stockCode += this.listArrs[i].stockCode+','
      // }
      // console.log('111',stockCode)
      var that = this;
      that.$socket.connected(socket => {
        socket.send({
          type: "sub",
          params: "i000001,i399001,i399006,"
        });
        socket.on("DAY_MARKET", msg => {
          for (var i = 0; i < this.listArr1.length; i++) {
            if (this.listArr1[i].indexCode == msg.data.index_code) {
              this.listArr1[i].currentPoint = msg.data.price;
              this.listArr1[i].floatRate = msg.data.rate;
            }
          }
        });
      });
    },
    refreshData() {
      this.getMyList();
    },
    startRefresh() {
      this.intervalId = setInterval(this.refreshData, 3500); // 每5秒刷新一次
    },
    stopRefresh() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null;
      }
    },
    refresh() {
      this.stopRefresh();
      this.refreshData();
      this.startRefresh();
    },
    //进入详情
    goDetail(item) {
      //   if (this.userData.length == 0) {

      //     return;
      //   }
      var codes = "";
      var names = "";
      var stock_type = "";
      var soks = "";
      var if_zhishu = "0";
      var if_us = "";
      codes = item.stockCode;
      names = item.stockName;
      stock_type = item.stock_type;
      soks = this.filterSH(item.stock_type);
      if_zhishu = "0";
      if_us = item.stock_type == "us" ? "1" : "";
      this.$router.push({
        path: "/kline",
        query: {
          name: names,
          stockplate: item.stock_plate,
          code: codes,
          type: stock_type,
          sok: soks,
          if_us: if_us,
          usType: item.type,
          if_zhishu: if_zhishu
        }
      });
    },
    filterSH(val) {
      if (val.indexOf("sh") >= 0) {
        return 1;
      } else if (val.indexOf("bj") >= 0 || val.indexOf("sz") >= 0) {
        return 0;
      }
    },
    getsearch() {
      this.$router.push({
        path: "/Searchlist"
      });
    },
    onLoads() {
      this.pageNums++;
      this.loadings = true;
      this.getMyList();
    },
    async getMyList() {
      this.loadings = true;
      //获取自选列表
      let opt = {
        pageNum: this.pageNums,
        pageSize: 1500,
        keyWords: this.gpcodes
      };

      api
        .getMyList(opt)
        .then(res => {
          let { status, data } = res;
          if (status == 0) {
            this.listArrs = data.list;
          }
        })
        .finally(() => {
          this.loadings = false;
          this.finisheds = true;
        });
    },
    async getListMarket() {
      let val = {
        pageNum: 1,
        pageSize: 15
      };
      // 获取指数列表
      let result = await api.getListMarket(val);
      this.loading = false;
      if (result.status === 0) {
        this.listArr1 = result.data;
      } else {
        this.texts = result.msg;
        this.alertShow = true;
      }
    },
    async optionszx(val) {
      let data = await api.delOption({ code: val.stockGid });
      if (data.status === 0) {
        Toast({
          message: "删除成功",
          position: "middle",
          duration: 2000
        });
        this.listArrs = [];
        this.pageNums = 1;
        this.finisheds = false;

        this.getMyList();
      } else {
        console.log(data.msg);
      }
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.red {
  color: #ff5353 !important;
}

.green {
  color: #20b844 !important;
}

.hqred {
  color: #f11614 !important;
}

.hqgreen {
  color: #09965f !important;
}

.redbg {
  background: #fdf7f7 !important;
}

.greenbg {
  background: #f4faf8 !important;
}

.toubu {
  width: 100%;
  height: 1.6rem;
  background: linear-gradient(-55deg, rgb(241, 22, 20), rgb(241, 22, 20));
  display: flex;
  justify-content: space-between;

  .tl {
    margin-left: 0.32rem;
    margin-top: 0.37rem;

    span {
      color: #fff;
      font-size: 0.37rem;
      margin-right: 0.53rem;
      vertical-align: bottom;
    }

    .xuank {
      font-size: 0.48rem;
    }
  }

  .tr {
    width: 0.43rem;
    height: 0.43rem;
    background: url()
      no-repeat 50%;
    background-size: 100%;
    margin-right: 0.4rem;
    margin-top: 0.32rem;
  }
}

.daboxk {
  width: 100%;
  background: #fff;
  margin-top: -0.32rem;
  min-height: 1.07rem;
  border-radius: 0.4rem 0.4rem 0 0;
  padding-top: 0.4rem;

  .bankuai {
    width: 9.32rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .erty {
      width: 2.99rem;
      height: 2.14rem;
      background: #ffffff;
      border-radius: 0.21rem;
      text-align: center;

      h3 {
        font-size: 0.53rem;
        font-family: SourceHanSansCN;
        padding-top: 0.266rem;
        font-weight: 800;
        line-height: 0.75rem;
        margin-top: 0.13rem;
      }

      h5 {
        font-size: 0.32rem;
        font-family: SourceHanSansCN;
        font-weight: 500;
        color: #333;
        margin-top: 0.266rem;

        a {
          margin-left: 0.11rem;
        }
      }
    }
  }
}

.xuanzhe {
  width: 9.48rem;
  margin: 0 auto;
  margin-top: 0.29rem;
  border-radius: 0.13rem;

  .sangh {
    width: 9.48rem;
    display: flex;
    justify-content: space-between;

    span {
      width: 25%;
      color: #666;
      text-align: center;
      font-size: 0.35rem;
    }

    .lety {
      text-align: left;
      padding-left: 0.266rem;
    }
  }

  .shujkl {
    width: 9.48rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 0.026rem solid #e0e0e0;
    padding-bottom: 0.266rem;

    .dange {
      width: 25%;
      margin-top: 0.4rem;
      text-align: center;

      h6 {
        color: #333;
        font-size: 0.4rem;
        font-weight: 500;
        text-align: left;
      }

      p {
        color: #333;
        font-size: 0.32rem;
        margin-top: 0.13rem;
        text-align: left;

        span {
          width: 0.4rem;
          height: 0.4rem;
          padding: 0.04rem;
          background: #3b4fde;
          border-radius: 0.05rem;
          text-align: center;
          line-height: 0.4rem;
          color: #fff;
          font-size: 0.3rem;
        }

        a {
          display: inline-block;
          height: 0.4rem;
          line-height: 0.4rem;
          padding: 0 0.11rem;
          background: rgba(59, 79, 222, 0.1);
          border-radius: 0.05rem;
          color: #3b4fde;
          font-size: 0.32rem;
          vertical-align: middle;
        }

        .bj {
          background: #ea6248;
        }

        .sh {
          background: #aa3bde;
        }

        .shbg {
          color: #aa3bde;
          background: rgba(115, 131, 251, 0.1);
        }

        .bjbg {
          color: #ea6248;
          background: rgba(234, 98, 72, 0.1);
        }
      }

      .plk {
        font-size: 0.42rem;
        text-align: center;
        margin-top: 0.13rem;
        display: inline-block;
        font-weight: 600;
      }

      .alk {
        width: 1.33rem;
        height: 0.67rem;
        border-radius: 0.13rem;
        display: inline-block;
        text-align: center;
        line-height: 0.67rem;
        color: #fff;
        font-size: 0.35rem;
      }

      i {
        width: 0.43rem;
        height: 0.43rem;
        display: inline-block;
        background: url()
          no-repeat 50%;
        background-size: 100%;
        margin-top: 0.13rem;
      }

      .hqgreenbtnbg {
        background: #09965f;
      }

      .hqredbtnbg {
        background: #f11614;
      }
    }
  }
}

.tia {
  text-align: center;
  width: 3.5rem;
  margin: 0.4rem auto;

  img {
    width: 0.37rem;
    height: 0.37rem;
    vertical-align: middle;
    margin-top: -0.11rem;
    margin-right: 0.06rem;
  }

  span {
    color: #333;
    font-size: 0.37rem;
  }
}
</style>
